<template>
    <div id="father" >
        <div class="box">
            <div>
                <el-text class="mx-1">我是父组件</el-text>
                <h3>{{ num }}</h3>
                <el-button @click="Add" type="success"  round>增加</el-button>
            </div>
        </div>
        <div>
            <child 
            :num = "num"
            @sub = "sub"
            ></child>
        </div>
    </div>
</template>
 <script setup >
 import child from './child.vue';
 import { ref } from 'vue'
 const num =ref(0);
 const Add =()=>{
    num.value = num.value+1
 }
 const sub =()=>{
    num.value = num.value-1
 }
 </script>
 <style scoped lang="scss">
 #father{
    display: flex;
 }
 h3{
    text-align: center;
    font-size: 20px;
 }
 .box{
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 </style>